<!-- DivComponent.vue -->

<template>
    <div>
        <div v-for="(item, index) in items2" :key="index">
            <hr class="hr1" v-if="item.id > 1">
            <div class="card">
                <div class="blue"></div>
                <div class="name">{{ item.sname }}</div>
                <div :class="getClass(item.result)">{{item.result}}</div>
                <div class="text">
                    文件号：{{item.fileno}}
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.sid}}
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.grade}}
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.acade}}
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.major}}
                </div>
                <img src="../../../../assets/images/first/role.png" class="role" alt="">
                <img src="../../../../assets/images/first/month.png" class="role2" alt="">
                <img src="../../../../assets/images/first/clock.png" class="role3" alt="">
                <img src="../../../../assets/images/first/four.png" class="role4" alt="">
                <img src="../../../../assets/images/first/five.png" class="role5" alt="">
                <img src="../../../../assets/images/first/six.png" class="role6" alt="">
                <div class="one2">违纪角色：{{item.role}}</div>
                <div class="four2">违纪种类：{{item.kind}}</div>
                <div class="two2">处分期限：{{item.ctime}}天</div>
                <div class="three2">违纪发生时间：{{formatTime(item.htime)}}</div>
                <div class="five2">违纪解除提醒时间：{{formatTime(addDaysToDate(item.itime,item.ctime))}}</div>
                <div class="six2">违纪生效时间：{{formatTime(item.itime)}}</div>
                <div class="right1">录入时间：{{formatTime(item.etime)}}</div>
<!--                <div class="right2">添加人：</div>-->
<!--                <el-button plain class="bbtn1">-->
<!--                    <img src="../../../../assets/images/first/btn1.png" class="custom-icon" alt="Search Icon" />-->
<!--                    <span class="button-text">编辑</span>-->
<!--                </el-button>-->
            </div>
            <hr class="hr1">
        </div>
    </div>
</template>

<script>
export default {
  name: 'DivComponent',
  props: {
    items2: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      selectedNumber: '', // 选择的数字
      numbers: Array.from({ length: 365 }, (_, index) => index + 1),
      selectedItemIndex: 0
    }
  },
  computed: {
    selectedItem () {
      return this.items2[this.selectedItemIndex] || null // 获取当前选中的项，如果没有选中项则返回 null
    }
  },
  methods: {
    formatTime (date) {
      if (!date) return '' // 如果没有日期，返回空字符串
      const year = date.getFullYear()
      const month = this.padZero(date.getMonth() + 1)
      const day = this.padZero(date.getDate())
      const hours = this.padZero(date.getHours())
      const minutes = this.padZero(date.getMinutes())
      const seconds = this.padZero(date.getSeconds())
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` // 返回格式化后的日期时间字符串
    },
    addDaysToDate (date, days) {
      const result = new Date(date)
      result.setDate(result.getDate() + days)
      return result
    },
    padZero (value) {
      return value < 10 ? '0' + value : value.toString()
    },
    getClass (result) {
      switch (result) {
        case '记过':
          return 'result'
        case '警告':
          return 'result1'
        case '严重警告':
          return 'result2'
        case '留校察看':
          return 'result3'
        case '记大过':
          return 'result4'
        case '开除学籍':
          return 'result5'
      }
    }
  }
}
</script>

<style scoped src="./div.css">
</style>
